.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;


  .tips {
    padding: 10rpx 20rpx;
    background-color: #FEF4E0;
    color: #51321F;
    font-size: 28rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
  }

  .scroll-view {
    flex: 1;
    height: 0;
    display: flex;
    // background-color: red;
    background-color: #f8f8f8;

  }

  .content {
    flex: 1;
    padding: 20rpx;
    height: 100%;
    box-sizing: border-box;

    .time {
      text-align: center;
      width: 100%;
      font-size: 26rpx;
      color: #333;
      padding: 14rpx 0;

    }

    .item {
      display: flex;
      // background-color: #ccc;
      padding: 10rpx 0;

      flex-direction: row;

      &.my {
        flex-direction: row-reverse;

        .message {
          display: flex;
          ;
          flex-direction: row-reverse;
        }
      }

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 100%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .message {

        color: #fff;

        margin: 0 20rpx;
        flex: 1;
        // background-color: red;
        box-sizing: border-box;

        .text {
          font-size: 28rpx;
          list-style: 32rpx;
          background-color: #228be6;
          padding: 20rpx 30rpx;
          display: inline-block;
          box-sizing: border-box;
          border-radius: 20rpx;


        }
      }
    }

    .itemlast {
      height: 30rpx;
    }

  }

  .box-botton-flex {
    background-color: #fff;
    padding-top: 20rpx;
    padding-bottom: 50rpx;
    // box-shadow: 0rpx -3rpx 6rpx 1rpx rgba(235, 223, 206, 0.5);
    // border-top: 1px solid #f8f8f8;

    .flex-box {
      display: flex;
      align-items: center;

      .menu-icon {
        width: 60rpx;
        height: 60rpx;
        margin: 0 20rpx;

        image {
          width: 100%;
          height: 100%;
          opacity: .6;
        }
      }

      .input {
        border: 1px solid #ccc;
        flex: 1;
        height: 70rpx;
        border-radius: 16rpx;

        input {
          height: 70rpx;
          padding-left: 20rpx;
        }
      }

      .btn {
        margin: 0 14rpx;
        width: 140rpx;
        height: 70rpx;
        background-color: #2f9e44;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8rpx;
      }
    }

    .menu {
      display: flex;
      padding: 10rpx ;
      flex-wrap: wrap;
      padding: 20rpx 20rpx;
      padding-top: 30rpx;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-basis: 20%;
        margin-bottom: 10rpx;

        .icon {
          width: 56rpx;
          height: 56rpx;
          background-color: #fff;
          padding: 20rpx;
          border-radius: 20rpx;
          filter: invert(100%);

         

          opacity: .3;
        }

        text {
          font-size: 24rpx;
          margin-top: 10rpx;
          color: #999;
        }
      }
    }
  }
}

image {
  width: 60rpx;
  height: 60rpx;
}